import { PageHeader, Table, Modal, Button, Form, Input } from "antd";
import { Route } from "react-router-dom";
import { useState } from "react";
import { ServerTests } from "./servertestapp";
import { TestDetail } from "./testdetail";
import { CaretRightOutlined, DeleteFilled } from "@ant-design/icons";

const { Column } = Table;

export function ServerTestApp() {
    return (
        <>
            <Route path={"/index/project/test/servertest/testset"} component={TestSets}></Route>
            <Route path={"/index/project/test/servertest/servertests"} component={ServerTests}></Route>
            <Route path={"/index/project/test/servertest/testdetail"} component={TestDetail}></Route>
        </>
    )
}

function TestSets() {
    const [data, setData] = useState([
        {
            key: 1,
            name: "测试一号",
            status: "testing"
        }
    ])
    return (
        <div style={{ backgroundColor: "#fff", marginLeft: 20, height: "100%" }}>
            <PageHeader
                className="site-page-header"
                title="接口测试"
                subTitle=""
            />
            <div style={{ margin: "0 20px" }}>
                <div style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: 20
                }}>
                    <div></div>
                    <AddTestSet></AddTestSet>
                </div>
                <Table
                    rowKey="key"
                    dataSource={data}
                >
                    <Column title="名称" dataIndex="name"></Column>
                    <Column title="状态" dataIndex="status"></Column>
                    <Column title="操作" render={(value, record) => {
                        console.log(record)
                        return (
                            <>
                                <Button type="link" size="small"><CaretRightOutlined /></Button>
                                <Button type="link" size="small"><DeleteFilled /></Button>
                            </>
                        )
                    }}></Column>
                </Table>
            </div>

        </div>
    )
}


function AddTestSet() {
    const [isModalVisible, setModalVisible] = useState(false);
    const [isLoading] = useState(false);
    const handleCancel = () => {
        setModalVisible(false);
    };
    const handleClickAdd = () => {
        setModalVisible(true);
    };
    const handleFinished = () => {


    }
    return (
        <>
            <Button
                onClick={handleClickAdd}
                type="primary"
            >
                添加测试集
                </Button>
            <Modal
                title="添加测试集"
                visible={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button onClick={handleCancel} key="close">取消</Button>,
                    <Button
                        form="addTestSet"
                        type="primary"
                        loading={isLoading}
                        key="submit"
                        onClick={handleFinished}
                        htmlType="submit"
                    >
                        确定
                        </Button>
                ]}
                style={{ top: 300, width: 400 }}
            >
                <Form
                    labelCol={{ span: 5, offset: 1 }}
                    wrapperCol={{ span: 17 }}
                    name="addTestSet"
                >
                    <Form.Item
                        name="testSetName"
                        label="测试集名称"
                        rules={[{ required: true, min: 3, message: "最小应为3个字符" }]}
                    >
                        <Input></Input>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}